import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart'; // 用于格式化日期时间

import 'logic.dart';

class AddRecordPage extends StatelessWidget {
  const AddRecordPage({super.key});

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<AddRecordLogic>();
    final state = logic.state;

    // 获取当前时间并格式化
    String currentTime = DateFormat('yyyy-MM-dd HH:mm').format(DateTime.now());

    return Scaffold(
      appBar: AppBar(
        title: const Text('新增记录'),
        centerTitle: true, // 标题居中
        backgroundColor: Colors.orange.shade300, // 更改 appBar 背景颜色
        elevation: 4, // 增加阴影效果
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              buildFormField(logic, '加油时间', currentTime, false, null),
              buildFormField(logic, '总里程', '请输入里程表的总里程', true, null),
              buildFormField(logic, '剩余里程', '请输入加油前剩余油量可行驶里程', true, null),
              buildFormField(logic, '加油费用', '请输入此次加油费用', true, null),
              buildDualFormField(logic, '优惠金额', '请输入', '支付金额', '长按输入'),
              buildFormField(logic, '油价', '请输入油价', true, null),
              buildFormField(logic, '加油量', '长按输入', true, null),
              buildLastRecordWidget(logic),
              const SizedBox(height: 24),
              buildSaveButton(logic),
            ],
          ),
        ),
      ),
    );
  }

  // 构建单个表单字段的方法
  Widget buildFormField(
    AddRecordLogic logic,
    String label,
    String hintText,
    bool isEditable,
    VoidCallback? onTap,
  ) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          label,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold, // 加粗标签文字
            color: Colors.grey,
          ),
        ),
        const SizedBox(height: 12),
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            color: Colors.grey[100],
            border: Border.all(
              color: isEditable ? Colors.grey : Colors.grey,
              width: 1,
            ),
          ),
          child: TextFormField(
            initialValue: isEditable ? null : hintText,
            enabled: isEditable,
            readOnly: !isEditable,
            decoration: InputDecoration(
              hintText: hintText,
              border: InputBorder.none,
              contentPadding: const EdgeInsets.symmetric(
                horizontal: 16,
                vertical: 14,
              ),
            ),
            onTap: onTap,
          ),
        ),
        const SizedBox(height: 20),
      ],
    );
  }

  // 构建两个并排表单字段的方法
  Widget buildDualFormField(
    AddRecordLogic logic,
    String label1,
    String hintText1,
    String label2,
    String hintText2,
  ) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Expanded(
              child: buildFormField(logic, label1, hintText1, true, null),
            ),
            const SizedBox(width: 20),
            Expanded(
              child: buildFormField(logic, label2, hintText2, true, null),
            ),
          ],
        ),
        const SizedBox(height: 20),
      ],
    );
  }

  // 构建上次记录选择的组件
  Widget buildLastRecordWidget(AddRecordLogic logic) {
    final Rx<bool> isRecorded = false.obs; // 定义一个可观察的布尔值

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '上次记录了吗?',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.grey,
          ),
        ),
        const SizedBox(height: 12),
        Row(
          children: [
            Obx(
              () => AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                width: 100,
                height: 40,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: isRecorded.value ? Colors.green : Colors.grey[300],
                ),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.transparent,
                    elevation: 0,
                  ),
                  onPressed: () {
                    isRecorded.value = true;
                    // 可以在这里使用 logic 做一些操作
                  },
                  child: const Text('记录了'),
                ),
              ),
            ),
            const SizedBox(width: 20),
            Obx(
              () => AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                width: 100,
                height: 40,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(
                    color:
                        isRecorded.value ? Colors.grey : Colors.orange.shade300,
                    width: 1,
                  ),
                ),
                child: OutlinedButton(
                  style: OutlinedButton.styleFrom(
                    backgroundColor: Colors.transparent,
                    elevation: 0,
                  ),
                  onPressed: () {
                    isRecorded.value = false;
                    // 可以在这里使用 logic 做一些操作
                  },
                  child: const Text('没记录'),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }

  // 构建保存按钮
  Widget buildSaveButton(AddRecordLogic logic) {
    return Center(
      child: SizedBox(
        width: double.infinity * 0.6,
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.orange.shade300,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            padding: const EdgeInsets.symmetric(vertical: 16), // 增加按钮内边距
            elevation: 4,
          ),
          onPressed: () {
            logic.saveFuelRecord();
          },
          child: const Text(
            '保存',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}
